<script setup lang="ts">
import { ref } from 'vue';
import SideBar from '@/components/SideBar.vue';
import KgSearchDialog from './KgSearchDialog.vue';
import SettingsDialog from './SettingsDialog.vue';

defineEmits<{
  (e: 'select'): void;
}>()

const showSideBar=ref(false),showSearch=ref(false),showSettings=ref(false);
const toggleSideBar=() =>{
  showSideBar.value=!showSideBar.value
}
</script>

<template>
  <v-app-bar
    color="primary"
    density="compact"
  >
    <template v-slot:prepend>
      <v-app-bar-nav-icon @click="toggleSideBar"></v-app-bar-nav-icon>
    </template>

    <v-app-bar-title class="text-center">点歌姬</v-app-bar-title>

    <template v-slot:append>
      <v-btn icon="mdi-magnify" @click="showSearch=true"></v-btn>
      <v-btn icon="mdi-cog-outline" @click="showSettings=true"></v-btn>
    </template>
  </v-app-bar>
  <side-bar v-model="showSideBar" />
  <KgSearchDialog v-model="showSearch" @select="$emit('select',$event)" />
  <SettingsDialog v-model="showSettings" />
</template>